<template>
  <div id="echarts4" />
</template>

<script setup>
import * as echarts from "echarts"
// import resize from "@/components/Charts/mixins/resize"
import { onMounted, ref, watch } from 'vue';
import useBigScreenStore from '@/stores/useBigScreenStore';
const bigScreenStore = useBigScreenStore()
const echartsData = ref()
const chartContainer = ref(null);
let myChart = null
let option = null
const initEcharts = () => {
  chartContainer.value = document.getElementById('echarts4');
  myChart = echarts.init(chartContainer.value);

}
const getBarEcharts = (echartData) => {
  console.log(echartData);
  myChart.clear()
  const series = []
  let xData = []
  let yData1 = []
  let yData2 = []
  let legendData = []
  if (echartData) {
    echartData.map(v => {
      xData.push(v.equipmentName)
      yData1.push(v.inUseNum)
      yData2.push(v.freeNum)
    })
  }
  option = {
    // backgroundColor: "rgba(1,25,53,.8)",
    "grid": {
      "top": "25%",
      "left": "5%",
      "bottom": "5%",
      "right": "5%",
      "containLabel": true
    },
    animation: false,
    "xAxis": [{
      "type": "category",
      "data": xData,
      "axisTick": {
        "alignWithLabel": true
      },
      "nameTextStyle": {
        "color": "#82b0ec"
      },
      "axisLine": {
        show: true,
        "lineStyle": {
          "color": "#82b0ec",
          "type": "solid",
          "width": 3
        }
      },
      "axisLabel": {
        "textStyle": {
          "color": "rgba(255,255,255,.6)"
        },
        interval: 0,
        rotate: -40,
        margin: 30
      }
    }],
    "yAxis": [{
      "type": "value",
      name: '台',
      "axisLabel": {
        "textStyle": {
          "color": "#fff"
        },
      },
      "splitLine": {
        "lineStyle": {
          "color": "rgba(255,255,255,0)"
        }
      },
      "axisLine": {
        "show": true,
        "lineStyle": {
          "color": "#fff",
          "type": "solid",
          "width": 0
        }
      },
      "min": 0,
      "max": function (value) {
        return Math.ceil(value.max / 20) * 20;//向上取整，Math.floor为向下取整
      },
      "interval": 50
    }],
    tooltip: {
      trigger: 'axis',
      triggerOn: 'mousemove',
      valueFormatter: function (value) {
        console.log(value, 'rfg');
        return value + '台';
      },
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: [{
        name: '使用', itemStyle: { color: '#FB8601' }, textStyle: {
          color: '#fff'
        }
      },
      {
        name: '空闲', itemStyle: { color: '#29B7F8' }, textStyle: {
          color: '#fff'
        }
      }],
      itemWidth: 14,
      borderRadius: 4,
      itemGap: 30
    },
    "series": [

      {
        name: '空闲',
        type: 'bar',//类型
        "barWidth": 8,//柱子宽度
        barGap: '100%', //不同系列柱间距离，这里为柱子宽度的10%
        barCateGoryGap: '30%',//同一系列柱间距离
        itemStyle: {//图形样式
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{//调用图形相关方法——渐变色生成器
              offset: 0,                      //这四个参数用于配置渐变色起止位置，依次对应右/下/左/上四个方位
              color: "#29B7F8"    //数组，用于配置颜色渐变过程，每一项为一个对象，包含offset和color两个参数
            },                                  //offset的范围0-1,对应位置
            {
              offset: 1,
              color: "rgba(25,223,221,.1)"
            }
            ]),
            barBorderRadius: [10, 10, 0, 0],
          },
        },
        data: yData2
      },
      // {
      //   "name": "正常",
      //   type: 'pictorialBar',
      //   symbolSize: [8, 5],
      //   symbolOffset: [-4.4, -3],
      //   symbolPosition: 'end',

      //   z: 12,
      //   // "label": {
      //   //     "normal": {
      //   //         "show": true,
      //   //         "position": "top",
      //   //         fontSize: 14,
      //   //         color: "#19dfdd",
      //   //         formatter:function(params,index){
      //   //             return params.value;
      //   //         }
      //   //     }
      //   // },
      //   color: "#79FFFA",
      //   data: this.yData2
      // },
      {
        name: '使用',
        type: 'bar',//类型
        "barWidth": 8,//柱子宽度
        barGap: '10%', //不同系列柱间距离，这里为柱子宽度的10%
        barCateGoryGap: '20%',//同一系列柱间距离
        itemStyle: {//图形样式
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{//调用图形相关方法——渐变色生成器
              offset: 0,                      //这四个参数用于配置渐变色起止位置，依次对应右/下/左/上四个方位
              color: "#EB9E37"    //数组，用于配置颜色渐变过程，每一项为一个对象，包含offset和color两个参数
            },                                  //offset的范围0-1,对应位置
            {
              offset: 1,
              color: "rgba(235,158,55,.1)"
            }
            ]),
            barBorderRadius: [10, 10, 0, 0],
          },
        },

        data: yData1
      },
      // {
      //   "name": "故障",
      //   type: 'pictorialBar',
      //   symbolSize: [8, 5],
      //   symbolOffset: [4.4, -3],
      //   symbolPosition: 'end',
      //   z: 12,
      //   // "label": {
      //   //     "normal": {
      //   //         "show": true,
      //   //         "position": "top",
      //   //         fontSize: 14,
      //   //         color: color,
      //   //         formatter:function(params,index){
      //   //             return params.value;
      //   //         }
      //   //     }
      //   // },
      //   color: "#FFD3A2",
      //   data: this.yData1
      // },

    ]

  }
  myChart.setOption(option);
}
onMounted(() => {
  initEcharts()
})
// export default {
//   name: "echarts4",
//   // mixins: [resize],
//   props: {
//     dataset: Object
//   },
//   data() {
//     return {
//       chart: null,
//       xData: ['一体机', '投影仪', 'pc电脑', '中控', '扩声', '录播', '网络设备', "空调"],
//       yData1: [
//         2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 88
//       ],
//       yData2: [
//         8.0, 12.9, 28.0, 56.2, 20.6, 26.7, 195.6, 125
//       ],
//       timer: null
//     }
//   },
//   // watch: {
//   //   dataset: {
//   //     deep: true,
//   //     handler(val) {
//   //       this.yData1 = val.trainNumber
//   //       this.yData2 = val.duration
//   //       this.xData = val.dates
//   //       this.initConfig()
//   //     }
//   //   }
//   // },
//   mounted() {
//     this.initChart()
//   },
//   beforeDestroy() {
//     if (!chartInt) {
//       return
//     }
//     chartInt.dispose()
//     chartInt = null
//     clearInterval(this.timer)
//   },
//   methods: {
//     initChart() {
//       let that = this
//       chartInt = echarts.init(document.getElementById("echarts4"))
//       this.initConfig()

//     },

//   }
// }

watch(() => bigScreenStore.euqipmentCountList, (n, o) => {
  echartsData.value = n
  getBarEcharts(echartsData.value)
})
</script>

<style scoped lang="less">
#echarts4 {
  width: 100%;
  height: 90%;
}
</style>
